<template lang="html">
  <div class="fixedTop">
    <ul class="leaseTab">
      <li v-for="(item,index) in leaseTab"
      :class="{'active':idx==index}"
      @click="setActive(index)">
        <span>{{item}}</span>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name:'tab',
  props:["leaseTab"],
  data:()=>({
    idx:0,
  }),
  methods:{
    setActive(index){
      this.idx = index;
      this.$emit('tabActive',{idx:index});
    }
  }
}
</script>

<style lang="scss" scoped>
@import "@/main.scss";
.leaseTab{
  @include flex;
  border-bottom: 1px solid $borderColor;
  background: white;
  li{
    @include flexcell;
    text-align: center;
    line-height: 40px;
    font-size: 1.2rem;
    &.active{
      span{
        border-bottom: 2px solid $greenColor;
        color: $greenColor;
        display: inline-block;
      }
    }
  }
}
</style>
